<template>
    <!-- 三级列表 -->
    <Category :disabled="showList === 1"/>

    <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ marginTop: '30px' }">
        <!-- 条件渲染不同的子组件 -->
        <SpuList v-if="showList === 0" @setState="setState" />
        <SpuFrom v-if="showList === 1" @setState="setState" :spuInfo="newSpuInfo"/>
        <SkuFrom v-if="showList === 2" @setState="setState" :spuInfo="newSpuInfo"/>
    </el-card>

</template>

<script lang="ts">
import { defineComponent } from "vue";
//引入子组件
import SpuList from "./components/SpuList/index.vue"
import SpuFrom from "./components/SpuFrom/index.vue"
import SkuFrom from "./components/SkuFrom/index.vue"
import type { supInfoType } from "@/api/spu";
import { storeToRefs } from "pinia";
export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue"
import useAttrStore from "@/stores/attr";


const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

//1.定义数据控制显示不同的组件
const showList = ref(0)

//定义一个要添加的数据
const newSpuInfo = ref<supInfoType>({
    category3Id: category3Id.value as number,
    description: "",
    tmId: null,
    spuName: "",
    spuImageList: null,
    spuSaleAttrList: null,
})

//2.自定义事件
const setState = (state: number, row?: supInfoType) => {
    //接收子组件的数据，展示不同的子组件
    showList.value = state

    //如果有row，说明是修改，则数据回填  row传递过来后子组件已近卸载了，不用深拷贝
    if (row) {
        newSpuInfo.value = row
    } else {
        //没有row说明是添加，把数据恢复到初始值
        newSpuInfo.value = {
            category3Id: category3Id.value as number,
            description: "",
            tmId: null,
            spuName: "",
            spuImageList: null,
            spuSaleAttrList: null,
        }
    }
}

</script>